<template>
	<view class="imt-calendar">
		<view class="calendar-month-wrapper">
			<image src="../../static/icon/icon-sign.png" style="width: 4upx;height: 26upx;"/>
			<view class="calendar-title">{{title}}</view>
			<view style="font-size: 20upx;color: #999999;">{{currentTime}}</view>
		</view>
		<!-- <view class="calendar-month-wrapper">
			<view class="calendar-icon calendar-icon-leftArrow" :style="{color:current&&color}" @click="current&&current--">&#xe6ab;</view>
			<view class="calendar-month">{{currentTime}}</view>
			<view class="calendar-icon calendar-icon-rightArrow" :style="{color:current == calendar.length-1 || color}" @click="current == calendar.length-1 || current++">&#xe6ab;</view>
		</view> -->
		<view class="calendar-week-wrapper">
			<view class="calendar-week" v-for="(item,index) in week" :key="index">{{item}}</view>
		</view>
		<swiper class="calendar-date-swiper" :current="current" @change="handleChange">
			<swiper-item class="calendar-date-wrapper" v-for="(item,index) in calendar" :key="index">
				<view class="calendar-date" v-for="(value,key) in item" :key="key" @click="getDay(value.date)">
					<view class="date" :class="checked == value.date?'checked':''">{{value.date}}</view>
					<view v-if="value.active" class="calendar-point"></view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				week: ['日', '一', '二', '三', '四', '五', '六'],
				current: '',
				startYear: '',
				startMonth: '',
				endYear:'',
				endMonth:'',
				calendar: [],
				today:'',
				checked:null
			}
		},
		props: {
			selected: {
				type: Array,
				default () {
					return []
				}
			},
			title: {
				type: String
			},
			color: {
				type: String,
				default: '#e5373f'
			}
		},
		// created() {
		// 	this.getData()
		// },
		methods: {
			getData(label) {
				let year = new Date().getFullYear()
				let month = new Date().getMonth()
				let day = new Date().getDate()
				let week = new Date().getDay()
				this.today = year + '年' + (month+1) + '月' + day + '日' + ' ' + '星期' + this.week[week]
				this.startYear = this.selected.length ? this.selected[0].substr(0, 4) : `${year}`
				this.startMonth = this.selected.length ? this.selected[0].substr(5, 2) - 1 : month
				this.endYear = this.selected.length ? this.selected[1].substr(0, 4) : `${year}`
				this.endMonth = this.selected.length ? this.selected[1].substr(5, 2) - 1 : month
				this.calendar = [...Array((this.endYear - this.startYear) * 12 + this.endMonth - this.startMonth + 1).keys()].map(i => this.getDate(
					this.format(i)))
				// this.selected.forEach(i => {
				// 	let time = i.split('-')
				// 	this.calendar[time[1] - this.startMonth - 1 + (time[0] - this.startYear) * 12][time[2] - 1 + new Date(
				// 		`${time[0]}-${time[1]}`).getDay()].selected = true
				// })
				this.current = this.calendar.length - 1
				this.checked = day
				for (let i in label) {
					for (let j in this.calendar[this.current]) {
						if (label[i] == this.calendar[this.current][j].date) {
							this.calendar[this.current][j].active = true
						}else{
							this.calendar[this.current][j].active = false
						}
					}
				}
			},
			getDate(e) {
				let time = e.split('-')
				return [...Array(new Date(`${time[0]}-${time[1]}`).getDay())].map(i => ({
					date: ''
				})).concat([...Array([4, 6, 9, 11].includes(time[1] * 1) ? 30 : (time[1] != 2 ? 31 : (time[0] % 4 == 0 ? 29 : 28)))
					.keys()
				].map(i => ({
					date: i + 1
				})))
			},
			format(e) {
				let time = new Date(new Date(this.startYear).setMonth(this.startMonth + e))
				return `${time.getFullYear()}-${(time.getMonth()<9 && '0')+(time.getMonth()+1)}`
			},
			getDay(date) {
				this.checked = date
				var value = this.currentTime + '-' + date
				this.$emit('change', value)
			},
			handleChange(e){
				this.current = e.detail.current
				this.checked = null
			}
		},
		computed: {
			currentTime() {
				return this.format(this.current)
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: 'imt-calendar';
		src: url('//at.alicdn.com/t/font_1114123_r6yq558axt.ttf') format('truetype');
	}

	.imt-calendar {
		width: 700upx;
		margin: 0 25upx;
		background: #fff;
		border-radius: 10upx;
		text-align: center;
		color: #333;
	}

	.calendar-title {
		font-size: 30upx;
		color: #333333;
		margin-left: 20upx;
		margin-right: 20upx;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.calendar-month-wrapper {
		/* display: flex;
		justify-content: space-between;
		border-bottom: 2upx solid #e5e5e5; */
		text-align: left;
		display: flex;
		align-items: center;
		padding: 10upx 20upx;
	}

	.calendar-icon {
		font-family: 'imt-calendar';
		width: 100upx;
		font-size: 32upx;
		line-height: 80upx;
		color: #ccc;
	}

	.calendar-month {
		font-size: 32upx;
		line-height: 80upx;
	}

	.calendar-icon-leftArrow {
		transform: rotate(180deg);
	}

	.calendar-week-wrapper {
		display: flex;
	}

	.calendar-week {
		flex: 1;
		font-size: 24upx;
		line-height: 80upx;
		color: #666666;
	}

	.calendar-date-swiper {
		height: 500upx;
	}

	.calendar-date-wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	.calendar-date {
		width: 60upx;
		height: 60upx;
		font-size: 28upx;
		/* line-height: 60upx; */
		border-radius: 50%;
		margin: 20upx;
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.date{
		width: 42upx;
		height: 42upx;
		border-radius: 50%;
		line-height: 42upx;
		text-align: center;
	}
	
	.checked{
		background: #02A8F4;
		color: #FFFFFF;
	}

	.calendar-point {
		width: 4upx;
		height: 4upx;
		border-radius: 50%;
		background: #02A8F4;
		margin-top: 10upx;
	}
</style>
